<template>
    <div class="success">

        <div class="share-div" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="header">
            <div class="header-success">
                <img class="header-success-icon" src="../assets/kbx_ewm.png" alt="">
                预订成功
            </div>
            <p class="header-desc">感谢您选择快帮行，请保持手机畅通，我们将在12小时内联系您！</p>
        </div>

        <div class="gift">
            <div class="gift-info">
                <P>邀请朋友注册成功，您至少可得￥<span class="gift-info-price">50 </span>元旅行红包。</P>
                <!-- <P>邀请他人注册至少可得¥</P> -->
            </div>
            <img class="gift-img"  @click="shareFn" src="../assets/receive.png" alt="">
        </div>

        <div class="back">
            <router-link class="back-btn" to="/">返回首页</router-link>
            <div class="back-btn" @click="shareFn">立即领取红包</div>
        </div>
        <div class="rec">
            <div class="rec-title">当季活动推荐</div>
            <div class="rec-list">
                <div class="rec-list-item" v-for="item in seasonGoods">
                    <router-link :to="'/show/'+item.goods_id">
                        <img class="rec-list-item-img" :src="item.image"/>
                    </router-link>
                    <div class="rec-list-item-info">
                        <div class="rec-list-item-tit">
                            <router-link :to="'/show/'+item.goods_id">{{item.name}}</router-link>
                        </div>
                        <div class="rec-list-item-price">¥ {{item.jiage}} <span class="old">{{item.yuanjia}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {MessageBox } from 'mint-ui';
    import wxShare from "../store/wxShare"
    import config from '../store/config'
    import storage from "../store/localstorage"
    export default {
        name: "PaySuccess",

        data() {
            return {
                url:config.url,
                order_id:'',
                goods_id:'',
                goods_image:'',
                shareView: false, //分享
                seasonGoods:[]
            }
        },
        methods: {
            shareFn() {
                this.shareView = !this.shareView;
            },
            // 分享
            share() {
                var userinfo = storage.get('userinfo');
                var uid='';
                if(userinfo.member_id){
                    uid=userinfo.member_id;
                }
                wxShare({
                    title:'新人红包赠与你，想去哪浪去哪浪！', // 分享标题
                    desc: '快帮行，北美定制游陪你玩点不一样的', // 分享描述
                    link: config.url+'/quick_help_wap1/#/show/'+this.goods_id+'?order_id='+this.order_id+'&uid='+uid, // 分享链接
                    //imgUrl: this.goods_image, // 分享图标
                    imgUrl:config.url+'/uploads/admin/admin_thumb/20180104/xing.jpg',
                    debug: false
                }, () => {//分享成功后的回调函数
                    this.shareView = false
                    this.axios.post('/waporderdiscount',{
                        goods_id:this.goods_id,
                        order_id:this.order_id
                    }).then(res=>{
                        MessageBox({
                            title: '提示',
                            message: "旅行红包领取成功，去查看？",
                            confirmButtonText:'确定',
                            showCancelButton: true,
                            closeOnClickModal:false,
                        }).then(res=>{
                            if(res=='confirm'){
                                this.$router.push('/my-ticket-other')
                            }else{
                                return;
                            }
                        });
                    })
                });
            },
            // 当即推荐
            getSeasonGoods() {
                this.axios.post('seasonGoods')
                    .then(res => {
                        // this.seasonGoods = res.data.goods;
                        var reg = /^(http|https):\/\//;
                        res.data.goods.forEach(item => {
                            if (!reg.test(item.image)) {
                                item.image = this.url + item.image
                            }
                            this.seasonGoods.push(item);
                        })
                    })
                    .catch(err => console.log(err))
            },
        },
        mounted() {
            this.order_id= this.$route.query.order_id;
            this.goods_id= this.$route.query.goods_id;
            this.goods_image= this.$route.query.goods_image;
            this.share();
            this.getSeasonGoods();
        }

    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .success {
        position: relative;
        background-color: $bgcolor1;
        min-height: 100%;
    }

    .header {
        padding: rpx(30);
        color: $color5;

        &-success {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: rpx(30);
            font-size: rpx(36);
            &-icon {
                margin-right: rpx(20);
                width: rpx(64);
                height: rpx(64);
            }
        }

        &-desc {
            padding: 0 rpx(60) rpx(30);
            text-align: center;
            line-height: 160%;
        }
    }

    .gift {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: rpx(30);
        padding: rpx(30);
        background: $color0;
        border-radius: rpx(20);
        color: $color3;
        font-size: rpx(32);

        &-info {
            line-height: 160%;

            &-price {
                font-size: rpx(62);
                font-style: italic;
            }
        }

        &-img {
            width: rpx(128px);
            height: rpx(128px);
        }
    }

    .back {
        display: flex;
        justify-content: center;
        margin: rpx(30) rpx(30);

        &-btn {
            display: inline-block;
            margin: rpx(30);
            border-radius: rpx(30);
            padding: rpx(20) rpx(30);
            border: 2px solid $color3;
            font-size: rpx(32);
            color: $color3;
        }
    }

    .rec {
        margin: rpx(30) rpx(30);
        padding: 0 rpx(20) rpx(20);
        background: $color0;
        border-radius: rpx(20);

        &-title {
            padding: rpx(30) rpx(15) 0;
            font-size: rpx(32);
            color: $color3;
        }

        &-list {
            display: flex;
            flex-wrap: wrap;

            &-item {
                display: flex;
                align-items: center;
                border-bottom: $color2 solid 1px;

                &-img {
                    border-radius: rpx(10);
                    margin: rpx(30) 0;
                    width: rpx(128);
                    height: rpx(128);
                }

                &-info {
                    flex: 1;
                }

                &-tit {
                    padding: rpx(20) rpx(20) 0;
                    font-size: rpx(28);
                    line-height: 130%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical
                }

                &-price {
                    padding: rpx(20);
                    font-size: rpx(30);
                    color: $color3;

                    .old {
                        font-size: rpx(24);
                        color: $color5;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }


    //分享
    .share {
        &-div {
            position: fixed;
            background: rgba(0, 0, 0, .5);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 99999;
            width: 100%;
            height: 100%;
            text-align: center;

            &-img {
                margin-top: rpx(30);
                width: rpx(500);
                height: rpx(220);
            }
        }
    }
</style>

